<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
		<style type="text/css">
			ul>li>ul {
				width: 100px;
				display: none;
				list-style: none;
				border: 1px solid black;
				border-top: none;
				margin: 0;
				padding: 0;
			}
			body>ul>li{
				float: left;
				list-style: none;
				width: 100px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<a>华为手机</a>
				<ul>
					<li>mate系列</li>
					<li>nove系列</li>
					<li>p系列</li>
					<li>麦芒系列</li>
					<li>畅享系列</li>
				</ul>
			</li>
			<li>
				<a>华为手机</a>
				<ul>
					<li>mate系列</li>
					<li>nove系列</li>
					<li>p系列</li>
					<li>麦芒系列</li>
					<li>畅享系列</li>
				</ul>
			</li>
		</ul>
		<script>
			$(function() {
				$("a").hover(function() {
						$(this).next().show()
					},
					function() {
						$(this).next().hide()
					})
			})
		</script>
	</body>

</html>